<template>
    <view class="course-list flex" v-for="(item, index) in list" :key="index">
        <view class="cover mr-[20rpx] flex-1">
            <view class="tags text-xs text-white">{{ getCourseType(item.type) }}</view>
            <u-image :src="item.cover" width="320" height="194" borderRadius="10"></u-image>
        </view>
        <view class="info flex flex-col justify-between flex-1">
            <view class="normal font-normal line-2 w-full line-clamp-2">{{ item.name }}</view>
            <view class="flex justify-end pb-[20rpx]">
                <u-button
                    @click="
                        goPage(
                            `/bundle/pages/evaluate_submit/index?id=${item?.id}&orderId=${item.orderId}`
                        )
                    "
                    type="primary"
                    size="medium"
                    shape="circle"
                    >评价</u-button
                >
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

/** Props Start **/
const props = withDefaults(
    defineProps<{
        list: any // 数据列表
    }>(),
    {
        list: []
    }
)
/** Props End **/

/** Computed Start **/
/**
 * @description 获取课程类型
 */
const getCourseType = computed(() => {
    return (type: number) => {
        switch (type) {
            case 1:
                return '图文'
            case 2:
                return '音频'
            case 3:
                return '视频'
            case 4:
                return '专栏'
        }
    }
})
/** Computed End **/

/** Methods Start **/
/**
 * @param { string } url
 * @return { void }
 * @description 跳转页面方法
 */
const goPage = (url: string) => {
    uni.navigateTo({
        url: url
    })
}
/** Methods End **/
</script>

<style lang="scss">
.course-list {
    padding: 24rpx 40rpx;
    margin: 24rpx 0;
    background-color: #ffffff;

    // 封面
    .cover {
        position: relative;

        // 封面标签
        .tags {
            top: 16rpx;
            left: 20rpx;
            z-index: 10;
            padding: 2rpx 8rpx;
            position: absolute;
            border-radius: 4rpx;
            background: rgba(0, 0, 0, 0.2);
        }
    }

    .info {
        height: 194rpx;
    }
}
</style>
